<template>
  <div style="margin-top: 20px">
    <ko-card :title="$t('business.configuration.data')">
      <el-form ref="form" label-position="top" :model="editForm" :rules="rules">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item :label="$t('business.configuration.kind')">
              <el-radio-group
                v-model="registryType"
                @change="onRegistryTypeChange(registryType)"
              >
                <el-radio :label="'Custom'" />
                <el-radio :label="'DockerHub'" />
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="registryType === 'Custom'" :gutter="20">
          <el-col :span="12">
            <el-form-item
              :label="$t('business.configuration.registry_domain_name')"
              prop="registry"
            >
              <ko-data-item
                v-model="editForm.registry"
                class="w-full"
                itemType="input"
                placeholder="e.g. some.docker.io"
                @change="syncToModel"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item
              :label="$t('business.configuration.username')"
              prop="username"
              style="width: 100%"
              :rules="[RequiredRule]"
            >
              <ko-data-item
                v-model="editForm.username"
                class="w-full"
                itemType="input"
                @change="syncToModel"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              :label="$t('business.configuration.password')"
              prop="password"
              :rules="[RequiredRule]"
            >
              <ko-data-item
                v-model="editForm.password"
                class="w-full"
                itemType="input"
                type="password"
                show-password
                @change="syncToModel"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </ko-card>
  </div>
</template>

<script setup lang="ts">
import KoCard from "@/views/domain/kubeHud/views/components/ko-card/index.vue";
import KoDataItem from "@/views/domain/kubeHud/views/components/ko-data-item/index.vue";
// import Rules from "@/views/domain/kubeHud/utils/rules";
import { onMounted, ref } from "vue";
import { SecretDataKey } from "../../../api/k8s";
import { useFormRule } from "../../../utils/rules";
import { decodeFromBase64, encodeToBase64 } from "@/utils/text";
const { RequiredRule } = useFormRule();

type Prop = {
  dataObj: any;
};

const props = defineProps<Prop>();
const emit = defineEmits(["update:dataObj"]);

const editForm = ref({
  registry: "",
  username: "",
  password: ""
});

const registryType = ref("Custom");
const rules = {
  registry: [RequiredRule]
};

const parseToForm = () => {
  const dockerCfg = props.dataObj?.[SecretDataKey.DockerConfigJson];
  if (!dockerCfg) return;
  const jsonStr = decodeFromBase64(dockerCfg);
  const authData = JSON.parse(jsonStr);
  const auths = authData?.auths ?? {};
  for (const registry in auths) {
    editForm.value = {
      registry: registry,
      username: auths[registry].username ?? "",
      password: auths[registry].password ?? ""
    };
  }
};

const onRegistryTypeChange = (type: string) => {
  switch (type) {
    case "DockerHub":
      editForm.value.registry = "index.docker.io/v1/";
      break;
    case "Quay.io":
      editForm.value.registry = "quay.io";
      break;
    default:
      editForm.value.registry = "";
  }

  syncToModel();
};

const syncToModel = () => {
  const modelData = {
    auths: {
      [editForm.value.registry]: {
        username: editForm.value.username,
        password: editForm.value.password
      }
    }
  };

  emit("update:dataObj", {
    [SecretDataKey.DockerConfigJson]: encodeToBase64(JSON.stringify(modelData))
  });
};

onMounted(() => {
  parseToForm();
});
</script>

<style scoped></style>
